<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>3.1 HTML | Bookdown: 使用 R Markdown 创作书籍和技术文档</title>
  <meta name="description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="generator" content="bookdown 0.37 and GitBook 2.6.7" />

  <meta property="og:title" content="3.1 HTML | Bookdown: 使用 R Markdown 创作书籍和技术文档" />
  <meta property="og:type" content="book" />
  <meta property="og:image" content="https://book.formlesslab.top/bookdown//images/cover.jpg" />
  <meta property="og:description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="github-repo" content="YuanchenZhu2020/bookdown-book-zh_CN" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="3.1 HTML | Bookdown: 使用 R Markdown 创作书籍和技术文档" />
  
  <meta name="twitter:description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="twitter:image" content="https://book.formlesslab.top/bookdown//images/cover.jpg" />

<meta name="author" content="Yihui Xie" />


<meta name="date" content="2024-12-22" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="output-formats.html"/>
<link rel="next" href="latexpdf.html"/>
<script src="libs/jquery/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />








<link href="libs/anchor-sections/anchor-sections.css" rel="stylesheet" />
<link href="libs/anchor-sections/anchor-sections-hash.css" rel="stylesheet" />
<script src="libs/anchor-sections/anchor-sections.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<link href="libs/datatables-css/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding/datatables.js"></script>
<link href="libs/dt-core/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core/js/jquery.dataTables.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.min.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<style type="text/css">
  
  div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
</style>
<style type="text/css">
/* Used with Pandoc 2.11+ new --citeproc when CSL is used */
div.csl-bib-body { }
div.csl-entry {
  clear: both;
  margin-bottom: 0em;
}
.hanging div.csl-entry {
  margin-left:2em;
  text-indent:-2em;
}
div.csl-left-margin {
  min-width:2em;
  float:left;
}
div.csl-right-inline {
  margin-left:2em;
  padding-left:1em;
}
div.csl-indent {
  margin-left: 2em;
}
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/extra_style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">使用 R Markdown 创作书籍和技术文档</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>翻译与排版说明</a>
<ul>
<li class="chapter" data-level="" data-path="翻译说明.html"><a href="翻译说明.html"><i class="fa fa-check"></i>翻译说明</a></li>
<li class="chapter" data-level="" data-path="排版说明.html"><a href="排版说明.html"><i class="fa fa-check"></i>排版说明</a></li>
<li class="chapter" data-level="" data-path="翻译进度.html"><a href="翻译进度.html"><i class="fa fa-check"></i>翻译进度</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="前言.html"><a href="前言.html"><i class="fa fa-check"></i>前言</a>
<ul>
<li class="chapter" data-level="" data-path="为什么要阅读这本书.html"><a href="为什么要阅读这本书.html"><i class="fa fa-check"></i>为什么要阅读这本书</a></li>
<li class="chapter" data-level="" data-path="本书的结构.html"><a href="本书的结构.html"><i class="fa fa-check"></i>本书的结构</a></li>
<li class="chapter" data-level="" data-path="软件信息与一些约定.html"><a href="软件信息与一些约定.html"><i class="fa fa-check"></i>软件信息与一些约定</a></li>
<li class="chapter" data-level="" data-path="致谢.html"><a href="致谢.html"><i class="fa fa-check"></i>致谢</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="关于作者.html"><a href="关于作者.html"><i class="fa fa-check"></i>关于作者</a></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> 简介</a>
<ul>
<li class="chapter" data-level="1.1" data-path="开发动机.html"><a href="开发动机.html"><i class="fa fa-check"></i><b>1.1</b> 开发动机</a></li>
<li class="chapter" data-level="1.2" data-path="开始.html"><a href="开始.html"><i class="fa fa-check"></i><b>1.2</b> 开始</a></li>
<li class="chapter" data-level="1.3" data-path="usage.html"><a href="usage.html"><i class="fa fa-check"></i><b>1.3</b> 使用方法</a></li>
<li class="chapter" data-level="1.4" data-path="new-session.html"><a href="new-session.html"><i class="fa fa-check"></i><b>1.4</b> 两种呈现方法</a></li>
<li class="chapter" data-level="1.5" data-path="一些提示.html"><a href="一些提示.html"><i class="fa fa-check"></i><b>1.5</b> 一些提示</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="components.html"><a href="components.html"><i class="fa fa-check"></i><b>2</b> 组成部分</a>
<ul>
<li class="chapter" data-level="2.1" data-path="markdown-syntax.html"><a href="markdown-syntax.html"><i class="fa fa-check"></i><b>2.1</b> Markdown 语法</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="markdown-syntax.html"><a href="markdown-syntax.html#内联格式"><i class="fa fa-check"></i><b>2.1.1</b> 内联格式</a></li>
<li class="chapter" data-level="2.1.2" data-path="markdown-syntax.html"><a href="markdown-syntax.html#块级元素"><i class="fa fa-check"></i><b>2.1.2</b> 块级元素</a></li>
<li class="chapter" data-level="2.1.3" data-path="markdown-syntax.html"><a href="markdown-syntax.html#数学表达式"><i class="fa fa-check"></i><b>2.1.3</b> 数学表达式</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html"><i class="fa fa-check"></i><b>2.2</b> Bookdown 中的 Markdown 功能拓展</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#equations"><i class="fa fa-check"></i><b>2.2.1</b> 方程编号与引用</a></li>
<li class="chapter" data-level="2.2.2" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#theorems"><i class="fa fa-check"></i><b>2.2.2</b> 定理与证明</a></li>
<li class="chapter" data-level="2.2.3" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#特殊的标题"><i class="fa fa-check"></i><b>2.2.3</b> 特殊的标题</a></li>
<li class="chapter" data-level="2.2.4" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#text-references"><i class="fa fa-check"></i><b>2.2.4</b> 文本引用</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="r-code.html"><a href="r-code.html"><i class="fa fa-check"></i><b>2.3</b> R 代码</a></li>
<li class="chapter" data-level="2.4" data-path="figures.html"><a href="figures.html"><i class="fa fa-check"></i><b>2.4</b> 图片</a></li>
<li class="chapter" data-level="2.5" data-path="tables.html"><a href="tables.html"><i class="fa fa-check"></i><b>2.5</b> 表格</a></li>
<li class="chapter" data-level="2.6" data-path="cross-references.html"><a href="cross-references.html"><i class="fa fa-check"></i><b>2.6</b> 交叉引用</a></li>
<li class="chapter" data-level="2.7" data-path="自定义区块.html"><a href="自定义区块.html"><i class="fa fa-check"></i><b>2.7</b> 自定义区块</a></li>
<li class="chapter" data-level="2.8" data-path="citations.html"><a href="citations.html"><i class="fa fa-check"></i><b>2.8</b> 引文</a></li>
<li class="chapter" data-level="2.9" data-path="latex-index.html"><a href="latex-index.html"><i class="fa fa-check"></i><b>2.9</b> 索引</a>
<ul>
<li class="chapter" data-level="2.9.1" data-path="latex-index.html"><a href="latex-index.html#插入索引条目"><i class="fa fa-check"></i><b>2.9.1</b> 插入索引条目</a></li>
<li class="chapter" data-level="2.9.2" data-path="latex-index.html"><a href="latex-index.html#构建索引"><i class="fa fa-check"></i><b>2.9.2</b> 构建索引</a></li>
</ul></li>
<li class="chapter" data-level="2.10" data-path="html-小组件.html"><a href="html-小组件.html"><i class="fa fa-check"></i><b>2.10</b> HTML 小组件</a></li>
<li class="chapter" data-level="2.11" data-path="web-页面和-shiny-应用.html"><a href="web-页面和-shiny-应用.html"><i class="fa fa-check"></i><b>2.11</b> Web 页面和 Shiny 应用</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="output-formats.html"><a href="output-formats.html"><i class="fa fa-check"></i><b>3</b> 输出格式</a>
<ul>
<li class="chapter" data-level="3.1" data-path="html.html"><a href="html.html"><i class="fa fa-check"></i><b>3.1</b> HTML</a>
<ul>
<li class="chapter" data-level="3.1.1" data-path="html.html"><a href="html.html#gitbook-style"><i class="fa fa-check"></i><b>3.1.1</b> GitBook 样式</a></li>
<li class="chapter" data-level="3.1.2" data-path="html.html"><a href="html.html#bs4-book"><i class="fa fa-check"></i><b>3.1.2</b> 三列 Bootstrap 样式</a></li>
<li class="chapter" data-level="3.1.3" data-path="html.html"><a href="html.html#bootstrap-style"><i class="fa fa-check"></i><b>3.1.3</b> 默认的 Bootstrap 样式</a></li>
<li class="chapter" data-level="3.1.4" data-path="html.html"><a href="html.html#tufte-style"><i class="fa fa-check"></i><b>3.1.4</b> Tufte 样式</a></li>
</ul></li>
<li class="chapter" data-level="3.2" data-path="latexpdf.html"><a href="latexpdf.html"><i class="fa fa-check"></i><b>3.2</b> LaTeX/PDF</a></li>
<li class="chapter" data-level="3.3" data-path="电子书.html"><a href="电子书.html"><i class="fa fa-check"></i><b>3.3</b> 电子书</a>
<ul>
<li class="chapter" data-level="3.3.1" data-path="电子书.html"><a href="电子书.html#epub"><i class="fa fa-check"></i><b>3.3.1</b> EPUB</a></li>
<li class="chapter" data-level="3.3.2" data-path="电子书.html"><a href="电子书.html#mobi"><i class="fa fa-check"></i><b>3.3.2</b> MOBI</a></li>
</ul></li>
<li class="chapter" data-level="3.4" data-path="a-single-document.html"><a href="a-single-document.html"><i class="fa fa-check"></i><b>3.4</b> 单个文档</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="customization.html"><a href="customization.html"><i class="fa fa-check"></i><b>4</b> 定制化</a>
<ul>
<li class="chapter" data-level="4.1" data-path="yaml-options.html"><a href="yaml-options.html"><i class="fa fa-check"></i><b>4.1</b> YAML 选项</a></li>
<li class="chapter" data-level="4.2" data-path="更换主题.html"><a href="更换主题.html"><i class="fa fa-check"></i><b>4.2</b> 更换主题</a></li>
<li class="chapter" data-level="4.3" data-path="模板.html"><a href="模板.html"><i class="fa fa-check"></i><b>4.3</b> 模板</a></li>
<li class="chapter" data-level="4.4" data-path="configuration.html"><a href="configuration.html"><i class="fa fa-check"></i><b>4.4</b> 配置</a></li>
<li class="chapter" data-level="4.5" data-path="internationalization.html"><a href="internationalization.html"><i class="fa fa-check"></i><b>4.5</b> 国际化</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="editing.html"><a href="editing.html"><i class="fa fa-check"></i><b>5</b> 编辑</a>
<ul>
<li class="chapter" data-level="5.1" data-path="build-the-book.html"><a href="build-the-book.html"><i class="fa fa-check"></i><b>5.1</b> 构建书籍</a></li>
<li class="chapter" data-level="5.2" data-path="预览单个章节.html"><a href="预览单个章节.html"><i class="fa fa-check"></i><b>5.2</b> 预览单个章节</a></li>
<li class="chapter" data-level="5.3" data-path="使用-http-服务预览书籍.html"><a href="使用-http-服务预览书籍.html"><i class="fa fa-check"></i><b>5.3</b> 使用 HTTP 服务预览书籍</a></li>
<li class="chapter" data-level="5.4" data-path="rstudio-ide.html"><a href="rstudio-ide.html"><i class="fa fa-check"></i><b>5.4</b> RStudio IDE</a></li>
<li class="chapter" data-level="5.5" data-path="collaboration.html"><a href="collaboration.html"><i class="fa fa-check"></i><b>5.5</b> 协同工作</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="publishing.html"><a href="publishing.html"><i class="fa fa-check"></i><b>6</b> 发布与出版</a>
<ul>
<li class="chapter" data-level="6.1" data-path="rstudio-connect.html"><a href="rstudio-connect.html"><i class="fa fa-check"></i><b>6.1</b> RStudio Connect</a></li>
<li class="chapter" data-level="6.2" data-path="netlify-drop.html"><a href="netlify-drop.html"><i class="fa fa-check"></i><b>6.2</b> Netlify Drop</a>
<ul>
<li class="chapter" data-level="6.2.1" data-path="netlify-drop.html"><a href="netlify-drop.html#构建和部署的工作流水线"><i class="fa fa-check"></i><b>6.2.1</b> 构建和部署的工作流水线</a></li>
<li class="chapter" data-level="6.2.2" data-path="netlify-drop.html"><a href="netlify-drop.html#开始之前"><i class="fa fa-check"></i><b>6.2.2</b> 开始之前</a></li>
<li class="chapter" data-level="6.2.3" data-path="netlify-drop.html"><a href="netlify-drop.html#构建书籍"><i class="fa fa-check"></i><b>6.2.3</b> 构建书籍</a></li>
<li class="chapter" data-level="6.2.4" data-path="netlify-drop.html"><a href="netlify-drop.html#部署网站"><i class="fa fa-check"></i><b>6.2.4</b> 部署网站</a></li>
<li class="chapter" data-level="6.2.5" data-path="netlify-drop.html"><a href="netlify-drop.html#可选更新站点"><i class="fa fa-check"></i><b>6.2.5</b> <em>可选：更新站点</em></a></li>
<li class="chapter" data-level="6.2.6" data-path="netlify-drop.html"><a href="netlify-drop.html#netlify-subdomain"><i class="fa fa-check"></i><b>6.2.6</b> <em>可选：更改默认子域名</em></a></li>
<li class="chapter" data-level="6.2.7" data-path="netlify-drop.html"><a href="netlify-drop.html#缺点和备选方案"><i class="fa fa-check"></i><b>6.2.7</b> 缺点和备选方案</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="github.html"><a href="github.html"><i class="fa fa-check"></i><b>6.3</b> GitHub</a></li>
<li class="chapter" data-level="6.4" data-path="html-发布功能.html"><a href="html-发布功能.html"><i class="fa fa-check"></i><b>6.4</b> HTML 发布功能</a>
<ul>
<li class="chapter" data-level="6.4.1" data-path="html-发布功能.html"><a href="html-发布功能.html#html-404"><i class="fa fa-check"></i><b>6.4.1</b> HTML 404 页面</a></li>
<li class="chapter" data-level="6.4.2" data-path="html-发布功能.html"><a href="html-发布功能.html#metadata-for-sharing"><i class="fa fa-check"></i><b>6.4.2</b> 用于共享的元数据</a></li>
</ul></li>
<li class="chapter" data-level="6.5" data-path="出版商.html"><a href="出版商.html"><i class="fa fa-check"></i><b>6.5</b> 出版商</a></li>
</ul></li>
<li class="appendix"><span><b>附录</b></span></li>
<li class="chapter" data-level="A" data-path="software-tools.html"><a href="software-tools.html"><i class="fa fa-check"></i><b>A</b> 软件工具</a>
<ul>
<li class="chapter" data-level="A.1" data-path="r-和-r-软件包.html"><a href="r-和-r-软件包.html"><i class="fa fa-check"></i><b>A.1</b> R 和 R 软件包</a></li>
<li class="chapter" data-level="A.2" data-path="pandoc.html"><a href="pandoc.html"><i class="fa fa-check"></i><b>A.2</b> Pandoc</a></li>
<li class="chapter" data-level="A.3" data-path="latex.html"><a href="latex.html"><i class="fa fa-check"></i><b>A.3</b> LaTeX</a></li>
</ul></li>
<li class="chapter" data-level="B" data-path="software-usage.html"><a href="software-usage.html"><i class="fa fa-check"></i><b>B</b> 软件使用</a>
<ul>
<li class="chapter" data-level="B.1" data-path="knitr.html"><a href="knitr.html"><i class="fa fa-check"></i><b>B.1</b> knitr</a></li>
<li class="chapter" data-level="B.2" data-path="r-markdown.html"><a href="r-markdown.html"><i class="fa fa-check"></i><b>B.2</b> R Markdown</a></li>
</ul></li>
<li class="chapter" data-level="C" data-path="常见问题.html"><a href="常见问题.html"><i class="fa fa-check"></i><b>C</b> 常见问题</a></li>
<li class="chapter" data-level="" data-path="参考文献.html"><a href="参考文献.html"><i class="fa fa-check"></i>参考文献</a></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="_blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Bookdown: 使用 R Markdown 创作书籍和技术文档</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="html" class="section level2 hasAnchor" number="3.1">
<h2><span class="header-section-number">3.1</span> HTML<a href="html.html#html" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<p>编译一本书（使用 <strong>bookdown</strong>）与编译一个单独的 R Markdown 文档（使用 <strong>rmarkdown</strong>）为 HTML 格式的主要区别在于，默认情况下一本书籍会生成多个 HTML 页面——通常每章一个 HTML 文件。这使得你在阅读书籍某一章节的时候能够更容易地添加书签或将其 URL 分享给他人，并且可以更快地将书籍加载到 Web 浏览器中。目前，我们为 HTML 输出提供了多种不同地样式：</p>
<ul>
<li>GitBook 样式 (Section <a href="html.html#gitbook-style">3.1.1</a>),</li>
<li>三列 Bootstrap 样式 (Section <a href="html.html#bs4-book">3.1.2</a>),</li>
<li>默认的 Bootstrap 样式 (Section <a href="html.html#bootstrap-style">3.1.3</a>)</li>
<li>Tufte 样式 (Section <a href="html.html#tufte-style">3.1.4</a>).</li>
</ul>
<div id="gitbook-style" class="section level3 hasAnchor" number="3.1.1">
<h3><span class="header-section-number">3.1.1</span> GitBook 样式<a href="html.html#gitbook-style" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>GitBook 样式来自于 GitBook，这是一个由 Friendcode, Inc 公司发起的项目 (<a href="https://www.gitbook.com" class="uri">https://www.gitbook.com</a>)，它致力于帮助作者使用 Markdown 撰写书籍。它提供了一种漂亮的风格，其布局由左侧显示目录的侧边栏和右侧的书籍主题组成。该设计能够对窗口大小变化做出响应，例如，当窗口足够宽时，导航按钮显示在书籍主体的左侧/右侧，当窗口较窄时，导航按钮折叠到底部，一边给读者更多的水平空间来阅读书籍主体部分。</p>
<p>开始撰写一本新的 <code>gitbook</code> 的最简单的方法就是使用 RStudio Project Wizard（<em>文件 (File) &gt; 新建项目 (New Project) &gt; 新的目录 (New Directory) &gt; 使用 bookdown 的书籍项目 (Book project using bookdown)</em>）并在下拉菜单中选择 <code>gitbook</code>（见图 <a href="html.html#fig:new-bs4-book">3.3</a>）。</p>
<p>如果你不使用 RStudio 或更喜欢使用函数，则可以从 R console 中使用 <code>bookdown::create_gitbook()</code> 创建相同的项目模板。请参阅 <code>?bookdown::create_gitbook</code> 以获取帮助。</p>
<p>我们对原始的 GitBook 项目做了一些改进。最重要的一点是，我们将 Markdown 引擎替换为基于 Pandoc 的 R Markdown v2，这样你在写书时可以使用更多的功能：</p>
<ul>
<li>你可以在 Markdown 中嵌入 R 代码块和内联 R 表达式，这样可以轻松创建可重复的 (reproducible) 文档，并使你不必手动同步计算过程与它的实际输出结果（<strong>knitr</strong> 将自动处理）。</li>
<li>Markdown 语法更加丰富：你可以编写 Pandoc 版本的 Markdown 支持的任何内容，例如 LaTeX 数学表达式和引文。</li>
<li>你可以在书中嵌入交互式内容（仅用于 HTML 输出）。例如 HTML 小组件和 Shiny 应用程序。</li>
</ul>
<p>我们还在用户界面中添加了一些有用的特性，很快我们将详细介绍它们。<strong>bookdown</strong> 中 GitBook 样式的输出格式函数为 <code>gitbook()</code>。它的参数如下所示：</p>
<div class="sourceCode" id="cb70"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb70-1"><a href="html.html#cb70-1" tabindex="-1"></a><span class="fu">gitbook</span>(<span class="at">fig_caption =</span> <span class="cn">TRUE</span>, <span class="at">number_sections =</span> <span class="cn">TRUE</span>,</span>
<span id="cb70-2"><a href="html.html#cb70-2" tabindex="-1"></a>  <span class="at">self_contained =</span> <span class="cn">FALSE</span>, <span class="at">anchor_sections =</span> <span class="cn">TRUE</span>,</span>
<span id="cb70-3"><a href="html.html#cb70-3" tabindex="-1"></a>  <span class="at">lib_dir =</span> <span class="st">&quot;libs&quot;</span>,</span>
<span id="cb70-4"><a href="html.html#cb70-4" tabindex="-1"></a>  <span class="at">global_numbering =</span> <span class="sc">!</span>number_sections,</span>
<span id="cb70-5"><a href="html.html#cb70-5" tabindex="-1"></a>  <span class="at">pandoc_args =</span> <span class="cn">NULL</span>, <span class="at">extra_dependencies =</span> <span class="fu">list</span>(), ...,</span>
<span id="cb70-6"><a href="html.html#cb70-6" tabindex="-1"></a>  <span class="at">template =</span> <span class="st">&quot;default&quot;</span>,</span>
<span id="cb70-7"><a href="html.html#cb70-7" tabindex="-1"></a>  <span class="at">split_by =</span> <span class="fu">c</span>(<span class="st">&quot;chapter&quot;</span>, <span class="st">&quot;chapter+number&quot;</span>, <span class="st">&quot;section&quot;</span>, <span class="st">&quot;section+number&quot;</span>, <span class="st">&quot;rmd&quot;</span>, <span class="st">&quot;none&quot;</span>),</span>
<span id="cb70-8"><a href="html.html#cb70-8" tabindex="-1"></a>  <span class="at">split_bib =</span> <span class="cn">TRUE</span>, <span class="at">config =</span> <span class="fu">list</span>(), <span class="at">table_css =</span> <span class="cn">TRUE</span>,</span>
<span id="cb70-9"><a href="html.html#cb70-9" tabindex="-1"></a>  <span class="at">code_folding =</span> <span class="fu">c</span>(<span class="st">&quot;none&quot;</span>, <span class="st">&quot;show&quot;</span>, <span class="st">&quot;hide&quot;</span>))</span></code></pre></div>
<p>大多数参数被传递给 <code>rmarkdown::html_document()</code>，包括 <code>fig_caption</code>、<code>lib_dir</code> 和 <code>...</code>。想要了解所有可能参数的完整列表，你可以查阅 <code>rmarkdown::html_document()</code> 的帮助页面。我们强烈推荐你使用 <code>fig_caption = TRUE</code>，原因由两个：1) 使用标题来解释你的图片很重要；2) 启用图片标题意味着当输出为 LaTeX 时，图片将被放置在浮动环境中，否则可能会在某些页面上留下大量空白。图/表编号的格式取决于章节是否编号：如果 <code>number_sections = TRUE</code>，这些编号数字会使用 <code>X.i</code> 的格式，其中 <code>X</code> 是篇章编号而 <code>i</code> 是递增编号；如果章节没有编号，所有的图/表在书籍中将从 1、2、……、N 开始依次编号。请注意，在任何一种情况下，图片和表格的编号都是相互独立的。</p>
<p>在 <code>...</code> 的所有可能的参数之中，你最可能使用参数 <code>css</code> 提供一个或多个自定义的 CSS 文件来调整默认 CSS 样式。在 <code>gitbook()</code> 中有一些 <code>html_document()</code> 的参数被硬编码，你无法更改它们：<code>toc = TRUE</code>（必须使用目录）、<code>theme = NULL</code>（不使用任何 Bootstrap 主题）和 <code>template</code>（存在一个内部 GitBook 模板）。</p>
<p>请注意，如果将参数修改为 <code>self_contained = TRUE</code> 以更改 HTML 页面为自包含的 HTML 页面，则所有 HTML 文件的总大小都会显著增加，因为每个 HTML 文件中都必须嵌入许多 JS 和 CSS 文件。</p>
<p>除了这些 <code>html_document()</code> 的配置项之外，<code>gitbook()</code> 还有另外三个参数：<code>split_by</code>、<code>split_bib</code> 和 <code>config</code>。参数 <code>split_by</code> 指定了如何将 HTML 输出文件拆分为多个页面，其可能的值为：</p>
<ul>
<li><code>rmd</code>：使用输入的 Rmd 文件的文件名作为对应 HTML 文件的文件名，例如，<code>chapter3.Rmd</code> 生成的 HTML 文件为 <code>chapter3.html</code>。</li>
<li><code>none</code>：不要拆分 HTML 文件（整本书将是一个 HTML 文件）。</li>
<li><code>chapter</code>：按一级标题拆分文件。</li>
<li><code>section</code>：按二级标题拆分文件。</li>
<li><code>chapter+number</code> 和 <code>section+number</code>: 与 <code>chapter</code> 和 <code>section</code> 类似，但是文件将被编号。</li>
</ul>
<p>对于 <code>chapter</code> 和 <code>section</code>，HTML 文件名将由标题标识符确定，例如，篇章标题为 <code># Introduction</code> 的第一章的文件名默认为 <code>introduction.html</code>。对于 <code>chapter+number</code> 和 <code>section+number</code>，章/节编号将在 HTML 文件名之前，例如 <code>1-introduction.html</code> 和 <code>2-1-literature.html</code>。默认情况下，标题标识符是从标题文本自动生成的，<a href="#fn9" class="footnote-ref" id="fnref9"><sup>9</sup></a>你页可以在标题文本后使用语法 <code>{your-custom-id}</code> 手动指定标识符，例如：</p>
<div class="sourceCode" id="cb71"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb71-1"><a href="html.html#cb71-1" tabindex="-1"></a><span class="fu"># An Introduction {#introduction}</span></span>
<span id="cb71-2"><a href="html.html#cb71-2" tabindex="-1"></a></span>
<span id="cb71-3"><a href="html.html#cb71-3" tabindex="-1"></a>默认标识符是 <span class="in">`an-introduction`</span>，</span>
<span id="cb71-4"><a href="html.html#cb71-4" tabindex="-1"></a>但是我们将其更改为 <span class="in">`introduction`</span>。</span></code></pre></div>
<p>默认情况下，参考书目会被拆分，相关的引文项目将放在每页的底部，这样读者就不必导航到不同的参考书目页面来查看引文的详细信息。可以使用 <code>split_bib = FALSE</code> 禁用此功能，在这种情况下，所有引文都放在单独的页面上。</p>
<p>你可以使用 <code>config</code> 配置项中的几个子配置项来调整用户界面中的一些细节。回想一下，所有输出格式配置项（不仅仅适用于 <code>bookdown::gitbook</code>）都可以通过使用命令行接口 <code>bookdown::render_book()</code> 传递给格式函数，或直接将其写入 YAML 元数据。我们将 <code>gitbook</code> 格式下 <code>config</code> 的默认子配置项显示为 YAML 元数据并展示如下（请注意，它们的缩进都在 <code>config</code> 配置项下）：</p>
<div class="sourceCode" id="cb72"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb72-1"><a href="html.html#cb72-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:gitbook</span><span class="kw">:</span></span>
<span id="cb72-2"><a href="html.html#cb72-2" tabindex="-1"></a><span class="at">  </span><span class="fu">config</span><span class="kw">:</span></span>
<span id="cb72-3"><a href="html.html#cb72-3" tabindex="-1"></a><span class="at">    </span><span class="fu">toc</span><span class="kw">:</span></span>
<span id="cb72-4"><a href="html.html#cb72-4" tabindex="-1"></a><span class="at">      </span><span class="fu">collapse</span><span class="kw">:</span><span class="at"> subsection</span></span>
<span id="cb72-5"><a href="html.html#cb72-5" tabindex="-1"></a><span class="at">      </span><span class="fu">scroll_highlight</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb72-6"><a href="html.html#cb72-6" tabindex="-1"></a><span class="at">      </span><span class="fu">before</span><span class="kw">:</span><span class="at"> </span><span class="ch">null</span></span>
<span id="cb72-7"><a href="html.html#cb72-7" tabindex="-1"></a><span class="at">      </span><span class="fu">after</span><span class="kw">:</span><span class="at"> </span><span class="ch">null</span></span>
<span id="cb72-8"><a href="html.html#cb72-8" tabindex="-1"></a><span class="at">    </span><span class="fu">toolbar</span><span class="kw">:</span></span>
<span id="cb72-9"><a href="html.html#cb72-9" tabindex="-1"></a><span class="at">      </span><span class="fu">position</span><span class="kw">:</span><span class="at"> fixed</span></span>
<span id="cb72-10"><a href="html.html#cb72-10" tabindex="-1"></a><span class="at">    </span><span class="fu">edit </span><span class="kw">:</span><span class="at"> </span><span class="ch">null</span></span>
<span id="cb72-11"><a href="html.html#cb72-11" tabindex="-1"></a><span class="at">    </span><span class="fu">download</span><span class="kw">:</span><span class="at"> </span><span class="ch">null</span></span>
<span id="cb72-12"><a href="html.html#cb72-12" tabindex="-1"></a><span class="at">    </span><span class="fu">search</span><span class="kw">:</span></span>
<span id="cb72-13"><a href="html.html#cb72-13" tabindex="-1"></a><span class="at">      </span><span class="fu">engine</span><span class="kw">:</span><span class="at"> lunr</span><span class="co"> # or fuse</span></span>
<span id="cb72-14"><a href="html.html#cb72-14" tabindex="-1"></a><span class="co">      # options to control/tune search engine behavior (for</span></span>
<span id="cb72-15"><a href="html.html#cb72-15" tabindex="-1"></a><span class="co">      # fuse.js, refer to https://fusejs.io/api/options.html)</span></span>
<span id="cb72-16"><a href="html.html#cb72-16" tabindex="-1"></a><span class="at">      </span><span class="fu">options</span><span class="kw">:</span><span class="at"> </span><span class="ch">null</span></span>
<span id="cb72-17"><a href="html.html#cb72-17" tabindex="-1"></a><span class="at">    </span><span class="fu">fontsettings</span><span class="kw">:</span></span>
<span id="cb72-18"><a href="html.html#cb72-18" tabindex="-1"></a><span class="at">      </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> white</span></span>
<span id="cb72-19"><a href="html.html#cb72-19" tabindex="-1"></a><span class="at">      </span><span class="fu">family</span><span class="kw">:</span><span class="at"> sans</span></span>
<span id="cb72-20"><a href="html.html#cb72-20" tabindex="-1"></a><span class="at">      </span><span class="fu">size</span><span class="kw">:</span><span class="at"> </span><span class="dv">2</span></span>
<span id="cb72-21"><a href="html.html#cb72-21" tabindex="-1"></a><span class="at">    </span><span class="fu">sharing</span><span class="kw">:</span></span>
<span id="cb72-22"><a href="html.html#cb72-22" tabindex="-1"></a><span class="at">      </span><span class="fu">facebook</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb72-23"><a href="html.html#cb72-23" tabindex="-1"></a><span class="at">      </span><span class="fu">github</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-24"><a href="html.html#cb72-24" tabindex="-1"></a><span class="at">      </span><span class="fu">twitter</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb72-25"><a href="html.html#cb72-25" tabindex="-1"></a><span class="at">      </span><span class="fu">linkedin</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-26"><a href="html.html#cb72-26" tabindex="-1"></a><span class="at">      </span><span class="fu">weibo</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-27"><a href="html.html#cb72-27" tabindex="-1"></a><span class="at">      </span><span class="fu">instapaper</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-28"><a href="html.html#cb72-28" tabindex="-1"></a><span class="at">      </span><span class="fu">vk</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-29"><a href="html.html#cb72-29" tabindex="-1"></a><span class="at">      </span><span class="fu">whatsapp</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb72-30"><a href="html.html#cb72-30" tabindex="-1"></a><span class="at">      </span><span class="fu">all</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="st">&#39;facebook&#39;</span><span class="kw">,</span><span class="at"> </span><span class="st">&#39;twitter&#39;</span><span class="kw">,</span><span class="at"> </span><span class="st">&#39;linkedin&#39;</span><span class="kw">,</span><span class="at"> </span><span class="st">&#39;weibo&#39;</span><span class="kw">,</span><span class="at"> </span><span class="st">&#39;instapaper&#39;</span><span class="kw">]</span></span>
<span id="cb72-31"><a href="html.html#cb72-31" tabindex="-1"></a><span class="at">    </span><span class="fu">info</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code></pre></div>
<p><code>toc</code> 配置项控制目录 (TOC) 的行为。当加载页面时，你可以通过 <code>collapse</code> 配置项先将某些项目折叠。该配置项可能的值为 <code>subsection</code>、<code>section</code>、<code>none</code>（或 <code>null</code>）。如果你的目录很长且标题超过三个级别，则这个配置项可能会有所帮助：<code>subsection</code> 表示折叠目录项目中的所有小节 (X.X.X)；<code>section</code> 表示折叠目录项目中的所有节 (X.X)，因此最初仅显示顶级标题；<code>none</code> 表示不折叠目录中的任何项目。对于那些折叠的目录项目，可以通过单击其上级目录项目来切换其可见性。例如，你可以单击目录中的篇章标题以显示/隐藏该章的小节。</p>
<p><code>toc</code> 中的 <code>scroll_highlight</code> 配置项控制在滚动书籍正文页面时是否启用目录项目的高亮显示（默认情况下此功能已启用）。当向下/向上滚动时，每当新标题进入当前视口，左侧目录中的相应项目将高亮显示。</p>
<p>由于侧边栏的宽度是固定的，因此当目录中的某个项目由于标题文本太宽而被截断时，可以将光标悬停在侧边栏上以查看显示全部文字的提示条。</p>
<p>你可以使用 HTML 标签 <code>&lt;li&gt;</code> 在目录前后添加更多项目。这些项目将使用水平分隔器与目录分开。你可以使用管道符 <code>|</code>，这样就不需要按照 YAML 语法转义这些项目中的任何字符，例如：</p>
<pre><code>    toc:
      before: |
        &lt;li&gt;&lt;a href=&quot;...&quot;&gt;My Awesome Book&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;...&quot;&gt;John Smith&lt;/a&gt;&lt;/li&gt;
      after: |
        &lt;li&gt;&lt;a href=&quot;https://github.com/rstudio/bookdown&quot;&gt;
        Proudly published with bookdown&lt;/a&gt;&lt;/li&gt;</code></pre>
<p>当你浏览不同的 HTML 页面时，我们将尝试保留目录的滚动位置。通常即使你转到下一页，也会在目录的固定位置上看到滚动条。但是如果当前章/节的目录项目在页面加载时不可见，我们将自动滚动目录以使其对你可见。</p>
<div class="figure"><span style="display:block;" id="fig:gitbook-toolbar"></span>
<img src="images/gitbook.png" alt="The GitBook toolbar." width="100%" />
<p class="caption">
图 3.1: The GitBook toolbar.
</p>
</div>
<p>Gitbook 样式在每个页面的顶部都有一个工具栏（图 <a href="html.html#fig:gitbook-toolbar">3.1</a>），允许你动态地改变书籍设置。<code>toolbar</code> 配置项有一个子配置项 <code>position</code>，可以取值为 <code>fixed</code> 或 <code>static</code>。默认情况下 (<code>fixed</code>)，工具栏将被固定在页面的顶部，所以即使你向下滚动页面，工具栏也仍然在顶部可见。如果它被设置为 <code>static</code>，工具栏将不会随着页面滚动，也就是说，一旦滚动页面，你将无法看到它。</p>
<p>工具栏的第一个按钮可以切换侧边栏的可见性。你也可以敲击键盘上的 <code>S</code> 键来做同样的事。GitBook 样式能够记住侧边栏的可见性状态，例如，如果你关闭了侧边栏，那么下次打开书籍时，侧边栏将保持隐藏状态。事实上，GitBook 样式也能够记住许多其它的设置，例如搜索关键词和字体设置。</p>
<p>工具栏的第二个按钮是搜索按钮。它的键盘快捷键是 <code>F</code>（查找）。点击该按钮后，你会看到侧边栏的顶部出现一个搜索框。当你在框中输入时，目录项将会被过滤，以显示符合搜索关键词的部分。现在你可以使用方向键 <code>Up</code>/<code>Down</code> 来突出显示搜索结果中的上一个或下一个匹配内容。当你再次点击搜索按钮（或在搜索框外敲击 <code>F</code>），搜索关键词将被清空，搜索框将被隐藏。如果要禁用搜索，请在 <code>config</code> 中设置 <code>search: false</code> 配置项。</p>
<p>第三个按钮是用于字体/主题设置。读者可以改变字体大小（更大或更小），字体族（有衬线 (serif) 或无衬线 (sans serif)），以及主题（<code>White</code>、<code>Sepia</code> 或 <code>Nignt</code>）。你可以通过 <code>fontsettings</code> 配置项设置这些配置项的初始值。字体大小是按 0-4 的比例测量的；初始值可以设置为 1、2（默认）、3 或 4。可以通过设置 <code>fontsettings: null</code>（或 <code>no</code>）将该按钮从工具栏中删除。</p>
<div class="sourceCode" id="cb74"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb74-1"><a href="html.html#cb74-1" tabindex="-1"></a><span class="co"># changing the default</span></span>
<span id="cb74-2"><a href="html.html#cb74-2" tabindex="-1"></a><span class="at">    </span><span class="fu">fontsettings</span><span class="kw">:</span></span>
<span id="cb74-3"><a href="html.html#cb74-3" tabindex="-1"></a><span class="at">      </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> night</span></span>
<span id="cb74-4"><a href="html.html#cb74-4" tabindex="-1"></a><span class="at">      </span><span class="fu">family</span><span class="kw">:</span><span class="at"> serif</span></span>
<span id="cb74-5"><a href="html.html#cb74-5" tabindex="-1"></a><span class="at">      </span><span class="fu">size</span><span class="kw">:</span><span class="at"> </span><span class="dv">3</span></span></code></pre></div>
<p><code>edit</code>（编辑）配置项与第 <a href="configuration.html#configuration">4.4</a> 节中提到的配置项相同。如果它不为空，一个编辑按钮将被添加到工具栏中。这是为书籍的潜在贡献者设计的，他们可以在点击该按钮后在 GitHub 上编辑书籍内容并发送 Pull Requests。<code>history</code> 和 <code>View</code> 配置项的工作方式也是如此。</p>
<p>如果你的书有其它输出格式供读者下载，你可以提供 <code>download</code> 选项，这样就可以在工具栏中添加一个下载按钮。这个配置项可以接受一个字符向量，或者一个字符向量的列表，其中每个向量的长度为 2。当它是一个字符向量时，它应该包含文件名或文件扩展名，例如，以下两种设置都是正确的。</p>
<div class="sourceCode" id="cb75"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb75-1"><a href="html.html#cb75-1" tabindex="-1"></a><span class="at">    </span><span class="fu">download</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="st">&quot;book.pdf&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;book.epub&quot;</span><span class="kw">]</span></span>
<span id="cb75-2"><a href="html.html#cb75-2" tabindex="-1"></a><span class="at">    </span><span class="fu">download</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="st">&quot;pdf&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;epub&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;mobi&quot;</span><span class="kw">]</span></span></code></pre></div>
<p>当你只提供文件扩展名时，文件名来自于配置文件 <code>_bookdown.yml</code>（第 <a href="configuration.html#configuration">4.4</a> 节）中的书籍文件名。当 <code>download</code> 为 <code>null</code> 时，<code>gitbook()</code> 将在书籍输出目录中寻找 PDF、EPUB 和 MOBI 文件，并自动将它们加入 <code>download</code> 配置项中。如果你只是想关闭下载按钮，请使用 <code>download: false</code>。所有供读者下载的文件将显示在一个下拉菜单中，文件扩展名被用作菜单文本。当唯一可供读者下载的格式是 PDF 时，下载按钮将是一个单一的 PDF 按钮而不是一个下拉菜单。</p>
<p> &amp;esmp;另一种形式的 <code>download</code> 配置项的值是一个长度为 2 的向量构成的列表，例如：</p>
<div class="sourceCode" id="cb76"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb76-1"><a href="html.html#cb76-1" tabindex="-1"></a><span class="at">    </span><span class="fu">download</span><span class="kw">:</span><span class="at"> </span><span class="kw">[[</span><span class="st">&quot;book.pdf&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;PDF&quot;</span><span class="kw">],</span><span class="at"> </span><span class="kw">[</span><span class="st">&quot;book.epub&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;EPUB&quot;</span><span class="kw">]]</span></span></code></pre></div>
<p>你也可以把它写成这样：</p>
<div class="sourceCode" id="cb77"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb77-1"><a href="html.html#cb77-1" tabindex="-1"></a><span class="at">    </span><span class="fu">download</span><span class="kw">:</span></span>
<span id="cb77-2"><a href="html.html#cb77-2" tabindex="-1"></a><span class="at">      </span><span class="kw">-</span><span class="at"> </span><span class="kw">[</span><span class="st">&quot;book.pdf&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;PDF&quot;</span><span class="kw">]</span></span>
<span id="cb77-3"><a href="html.html#cb77-3" tabindex="-1"></a><span class="at">      </span><span class="kw">-</span><span class="at"> </span><span class="kw">[</span><span class="st">&quot;book.epub&quot;</span><span class="kw">,</span><span class="at"> </span><span class="st">&quot;EPUB&quot;</span><span class="kw">]</span></span></code></pre></div>
<p>列表中的每个向量由文件名和将在菜单中显示的文本组成。与第一种形式相比，这种形式允许你自定义菜单文本，例如，你可能有两份不同的 PDF 供读者下载，因此需要使菜单项目有所差别。</p>
<p>在工具栏的右边有一些按钮，它们可以让你在社会网络网站，如 Twitter、Facebook 和 Linkedin 上分享链接。你可以使用 <code>sharing</code> 配置项来决定启用哪些按钮。如果你想完全摆脱这些按钮，可以使用 <code>sharing: null</code>（或 <code>no</code>）。</p>
<p>工具栏中显示的另一个按钮是信息 (<code>i</code>) 按钮，它列出了可用于导航文档的键盘快捷方式。这个按钮可以通过设置 <code>info: false</code> 来隐藏。</p>
<p>最后，YAML 元数据中还有一些顶级配置项，可以通过 Pandoc 传递给 GitBook HTML 模板。它们可能不会对 HTML 输出产生明显的影响，但当你把 HTML 输出部署为网站时，它们可能会很有用。这些选项包括：</p>
<ul>
<li><code>description</code>: 一个字符串，它将会被写入 HTML 头部 <code>&lt;meta name="description" content=""&gt;</code> 标签中的 <code>content</code> 属性（如果缺失，将会使用书籍的标题替代）。这对搜索引擎优化 (search engine optimization, SEO) 很有用。请注意，它应该是纯文本，不应该使用任何 Markdown 格式，例如 <code>_italic_</code> 或 <code>**bold**</code>。</li>
<li><code>url</code>: 书籍网站的 URL，例如 <code>https\://bookdown.org/yihui/bookdown/</code>。<a href="#fn10" class="footnote-ref" id="fnref10"><sup>10</sup></a></li>
<li><code>github-repo</code>: <code>user/repo</code> 格式的 GitHub 储存库。</li>
<li><code>cover-image</code>: 书籍封面图片文件的路径。</li>
<li><code>apple-touch-icon</code>: 一个图标文件的路径（例如一个 PNG 图片）。这只适用于 iOS 系统：当网站被添加到主屏幕上时，该链接由这个图标表示。</li>
<li><code>apple-touch-icon-size</code>: 图标文件的大小（默认情况下为 152 x 152 像素）。</li>
<li><code>favicon</code>: <code>favorite icon</code>（收藏夹图标）文件的路径。通常情况下，这个图标显示在浏览器的地址栏中，如果浏览器支持标签，则显示在标签的页面标题前方。</li>
</ul>
<p>下面我们展示了一下 YAML 元数据的样例（请再次注意这些是 <em>顶级</em> 配置项）：</p>
<div class="sourceCode" id="cb78"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb78-1"><a href="html.html#cb78-1" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb78-2"><a href="html.html#cb78-2" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;An Awesome Book&quot;</span></span>
<span id="cb78-3"><a href="html.html#cb78-3" tabindex="-1"></a><span class="fu">author</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;John Smith&quot;</span></span>
<span id="cb78-4"><a href="html.html#cb78-4" tabindex="-1"></a><span class="fu">description</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;This book introduces the ABC theory, and ...&quot;</span></span>
<span id="cb78-5"><a href="html.html#cb78-5" tabindex="-1"></a><span class="fu">url</span><span class="kw">:</span><span class="at"> </span><span class="st">&#39;https\://bookdown.org/john/awesome/&#39;</span></span>
<span id="cb78-6"><a href="html.html#cb78-6" tabindex="-1"></a><span class="fu">github-repo</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;john/awesome&quot;</span></span>
<span id="cb78-7"><a href="html.html#cb78-7" tabindex="-1"></a><span class="fu">cover-image</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;images/cover.png&quot;</span></span>
<span id="cb78-8"><a href="html.html#cb78-8" tabindex="-1"></a><span class="fu">apple-touch-icon</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;touch-icon.png&quot;</span></span>
<span id="cb78-9"><a href="html.html#cb78-9" tabindex="-1"></a><span class="fu">apple-touch-icon-size</span><span class="kw">:</span><span class="at"> </span><span class="dv">120</span></span>
<span id="cb78-10"><a href="html.html#cb78-10" tabindex="-1"></a><span class="fu">favicon</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;favicon.ico&quot;</span></span>
<span id="cb78-11"><a href="html.html#cb78-11" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>设置 <code>description</code> 和 <code>cover-image</code> 的一个很好的效果是，当你在一些社交网站（如 Twitter）上分享你的书籍的链接时，该链接可以自动扩展为一个带有封面图片和书籍描述的卡片。</p>
</div>
<div id="bs4-book" class="section level3 hasAnchor" number="3.1.2">
<h3><span class="header-section-number">3.1.2</span> 三列 Bootstrap 样式<a href="html.html#bs4-book" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p><code>bs4_book()</code> 输出格式是使用 Bootstrap (<a href="https://getbootstrap.com" class="uri">https://getbootstrap.com</a>) 构建的，其功能经过了精心设计，无论你是在手机、平板电脑还是桌面上，都能获得干净的阅读体验。在全尺寸屏幕上，其布局包括散列内容，因此读者能够快速看到左边的所有章节，中间的当前章节，右边的当前篇章中的各个小节。你可以在这里阅读样例书籍：<a href="https://mastering-shiny.org" class="uri">https://mastering-shiny.org</a></p>
<div class="figure" style="text-align: center"><span style="display:block;" id="fig:unnamed-chunk-12"></span>
<a href="https://mastering-shiny.org" target="_blank"><img src="images/bs4-book.png" alt="Home page of a book with the three-column Bootstrap style."  /></a>
<p class="caption">
图 3.2: Home page of a book with the three-column Bootstrap style.
</p>
</div>
<p>除了基础的 <strong>bookdown</strong> 组件（第 <a href="components.html#components">2</a> 节），<code>bs4_book</code> 的主要功能包括：</p>
<ul>
<li><p>使用 <a href="https://pkgs.rstudio.com/bslib/"><strong>bslib</strong> 软件包</a>轻松定制颜色和字体。</p></li>
<li><p>内置搜索（按小节细分），帮助读者快速查找所需内容。</p></li>
<li><p>包含章节内目录的侧边栏，使得书籍导航更加简单，有助于提供在本章中有关当前位置的上下文。</p></li>
<li><p>精心排版，不管设备的大小，都尽可能使得内容易于阅读。在阅读时，一个悬浮标题会妨碍你的阅读，但是如果你需要的话，它很容易被访问。</p></li>
<li><p>行内脚注意味着你能够在它们所指文本的旁边阅读旁白。此主题最好与生成脚注的参考样式匹配。</p></li>
<li><p>通过 <a href="https://downlit.r-lib.org"><strong>downlit</strong> 软件包</a>进行的 R 语法高亮和自动链接，并搭配 Alison Hill 设计的无障碍配色方案。</p></li>
<li><p>增强了通过 Twitter、LinkedIn 和 Facebook等平台进行社会分享的元数据，这样，每一个分享的章节都会有一个独特的描述，根据该章节的内容自动生成。</p></li>
<li><p>配置指向远程存储库（如 GitHub 或 GitLab）的链接的能力，允许读者轻松查看每个章节的源文件或提供编辑建议。</p></li>
</ul>
<p>输出格式函数是 <a href="https://pkgs.rstudio.com/bookdown/reference/bs4_book.html"><code>bookdown::bs4_book</code></a>。以下是它的参数：</p>
<div class="sourceCode" id="cb79"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb79-1"><a href="html.html#cb79-1" tabindex="-1"></a><span class="fu">bs4_book</span>(<span class="at">theme =</span> <span class="fu">bs4_book_theme</span>(), <span class="at">repo =</span> <span class="cn">NULL</span>, ...,</span>
<span id="cb79-2"><a href="html.html#cb79-2" tabindex="-1"></a>  <span class="at">lib_dir =</span> <span class="st">&quot;libs&quot;</span>, <span class="at">pandoc_args =</span> <span class="cn">NULL</span>,</span>
<span id="cb79-3"><a href="html.html#cb79-3" tabindex="-1"></a>  <span class="at">extra_dependencies =</span> <span class="cn">NULL</span>, <span class="at">template =</span> <span class="st">&quot;default&quot;</span>,</span>
<span id="cb79-4"><a href="html.html#cb79-4" tabindex="-1"></a>  <span class="at">split_bib =</span> <span class="cn">FALSE</span>, <span class="at">footnotes_inline =</span> <span class="cn">TRUE</span>)</span></code></pre></div>
<div id="创作一本-bs4_book" class="section level4 hasAnchor" number="3.1.2.1">
<h4><span class="header-section-number">3.1.2.1</span> 创作一本 <code>bs4_book</code><a href="html.html#创作一本-bs4_book" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>开始撰写一本新的 <code>bs4_book</code> 的最简单的方法就是使用 RStudio 项目向导 (Project Wizard)（<em>File（文件） &gt; New Project（新的项目） &gt; New Directory（新的目录） &gt; Book project using bookdown（使用 bookdown 的书籍项目）</em>） 并在下拉菜单中选择 <code>bs4_book</code>。（请见图 <a href="html.html#fig:new-bs4-book">3.3</a>）。</p>
<div class="figure" style="text-align: center"><span style="display:block;" id="fig:new-bs4-book"></span>
<img src="images/new-bs4-book.png" alt="用于创建新的 bookdown 项目的 RStudio 项目向导的屏幕截图。"  />
<p class="caption">
图 3.3: 用于创建新的 bookdown 项目的 RStudio 项目向导的屏幕截图。
</p>
</div>
<p>如果你不使用 RStudio 或者喜欢使用函数来完成，可以在 R Console 中使用 <code>bookdown::create_bs4_book()</code> 创建相同的项目模板。参见 <code>?bookdown::create_bs4_book</code>或<a href="https://pkgs.rstudio.com/bookdown/reference/create_book.html">在线文档</a>以获得帮助。</p>
<p>这种风格是为每页展示一个章节的书籍设计的。这意味着每章是一个 <code>.Rmd</code> 文件，每个 <code>.Rmd</code> 文件可以包含一个章节。每个文件<em>必须</em>以一级标题开始，例如 <code># 章节标题</code>，而且必须是文件中唯一的一级标题。</p>
<p>在章节中使用第二级和更低级的标题，如：</p>
<div class="sourceCode" id="cb80"><pre class="sourceCode md"><code class="sourceCode markdown"><span id="cb80-1"><a href="html.html#cb80-1" tabindex="-1"></a><span class="fu">#   一章</span></span>
<span id="cb80-2"><a href="html.html#cb80-2" tabindex="-1"></a></span>
<span id="cb80-3"><a href="html.html#cb80-3" tabindex="-1"></a><span class="fu">##  一节</span></span>
<span id="cb80-4"><a href="html.html#cb80-4" tabindex="-1"></a></span>
<span id="cb80-5"><a href="html.html#cb80-5" tabindex="-1"></a><span class="fu">### 一小节</span></span></code></pre></div>
<p>第一级和第二级标题显示在当前章节的侧边栏中，当你向下滚动时，它会粘在页面顶部。当导航到一节时，像 <code>小节</code> 这样的三级子标题将自动展开。</p>
<p><code>index.Rmd</code> 文件是必需的，并且也是你的书籍的第一章。当你编译书籍时，它将会成为主页面。如果你想将仅应包含在书籍 HTML 版本的内容包括在内，你可能需要将 <strong>knitr</strong> <code>include</code> 区块配置项与 <code>knitr::is_html_output()</code> 函数相结合，有条件地包含该内容。有关说明请参见 <a href="https://bookdown.org/yihui/rmarkdown-cookbook/latex-html.html"><em>R Markdown Cookbook</em></a>。</p>
<p><code>index.Rmd</code> 中 <code>bs4_book</code> 的一个 YAML 头部开起来像这样：</p>
<div class="sourceCode" id="cb81"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb81-1"><a href="html.html#cb81-1" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb81-2"><a href="html.html#cb81-2" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;A Minimal Book Example&quot;</span></span>
<span id="cb81-3"><a href="html.html#cb81-3" tabindex="-1"></a><span class="fu">author</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;Jane Doe&quot;</span></span>
<span id="cb81-4"><a href="html.html#cb81-4" tabindex="-1"></a><span class="fu">date</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;2024-12-22&quot;</span></span>
<span id="cb81-5"><a href="html.html#cb81-5" tabindex="-1"></a><span class="fu">site</span><span class="kw">:</span><span class="at"> bookdown::bookdown_site</span></span>
<span id="cb81-6"><a href="html.html#cb81-6" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span><span class="at"> bookdown::bs4_book</span></span>
<span id="cb81-7"><a href="html.html#cb81-7" tabindex="-1"></a><span class="fu">url</span><span class="kw">:</span><span class="at"> https://bookdown.org/janedoe/bookdown-demo</span></span>
<span id="cb81-8"><a href="html.html#cb81-8" tabindex="-1"></a><span class="fu">cover-image</span><span class="kw">:</span><span class="at"> cover.png</span></span>
<span id="cb81-9"><a href="html.html#cb81-9" tabindex="-1"></a><span class="fu">description</span><span class="kw">: </span><span class="ch">|</span></span>
<span id="cb81-10"><a href="html.html#cb81-10" tabindex="-1"></a>  This is a minimal example of using the bookdown package to write a book.</span>
<span id="cb81-11"><a href="html.html#cb81-11" tabindex="-1"></a>  The output format for this example is bookdown::bs4_book.</span>
<span id="cb81-12"><a href="html.html#cb81-12" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
</div>
<div id="样式-定制化" class="section level4 hasAnchor" number="3.1.2.2">
<h4><span class="header-section-number">3.1.2.2</span> 样式 &amp; 定制化<a href="html.html#样式-定制化" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p><code>bs4_book()</code> 格式建立在 Bootstrap CSS 框架 (<a href="https://getbootstrap.com/docs/4.0/">Version 4</a>)上，这是一个可复用的 HTML、CSS 和 JavaScript 代码块的开源库。Bootstrap 框架允许通过 <strong>bslib</strong> R 软件包轻松定制颜色和字体。</p>
<p>你可以使用 <code>theme</code> 配置项来添加一个<a href="https://en.wikipedia.org/wiki/Web_colors">十六进制格式</a>的 <code>primary</code> 颜色，这将改变你书中所有链接的颜色和页脚的背景颜色。</p>
<div class="sourceCode" id="cb82"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb82-1"><a href="html.html#cb82-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb82-2"><a href="html.html#cb82-2" tabindex="-1"></a><span class="at">  </span><span class="fu">theme</span><span class="kw">:</span></span>
<span id="cb82-3"><a href="html.html#cb82-3" tabindex="-1"></a><span class="at">    </span><span class="fu">primary</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;#0d6efd&quot;</span><span class="at">   </span></span></code></pre></div>
<p>对于自定义字体设置，添加 <code>google:</code> 关键字会触发 <a href="https://rstudio.github.io/sass/reference/font_face.html"><code>sass::font_google()</code></a>的自动导入 <a href="https://fonts.google.com">Google 字体文件</a>的能力。下面是一个 YAML 的例子，改变了 <code>base_font</code>、<code>heading_font</code> 和 <code>code_font</code>。</p>
<div class="sourceCode" id="cb83"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb83-1"><a href="html.html#cb83-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb83-2"><a href="html.html#cb83-2" tabindex="-1"></a><span class="at">  </span><span class="fu">theme</span><span class="kw">:</span></span>
<span id="cb83-3"><a href="html.html#cb83-3" tabindex="-1"></a><span class="at">    </span><span class="fu">primary</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;#0d6efd&quot;</span><span class="at">   </span></span>
<span id="cb83-4"><a href="html.html#cb83-4" tabindex="-1"></a><span class="at">    </span><span class="fu">base_font</span><span class="kw">:</span><span class="at"> </span></span>
<span id="cb83-5"><a href="html.html#cb83-5" tabindex="-1"></a><span class="at">      </span><span class="fu">google</span><span class="kw">:</span><span class="at"> Sen</span></span>
<span id="cb83-6"><a href="html.html#cb83-6" tabindex="-1"></a><span class="at">    </span><span class="fu">heading_font</span><span class="kw">:</span></span>
<span id="cb83-7"><a href="html.html#cb83-7" tabindex="-1"></a><span class="at">      </span><span class="fu">google</span><span class="kw">:</span></span>
<span id="cb83-8"><a href="html.html#cb83-8" tabindex="-1"></a><span class="at">        </span><span class="fu">family</span><span class="kw">:</span><span class="at"> Bitter</span></span>
<span id="cb83-9"><a href="html.html#cb83-9" tabindex="-1"></a><span class="at">        </span><span class="fu">wght</span><span class="kw">:</span><span class="at"> </span><span class="dv">200</span></span>
<span id="cb83-10"><a href="html.html#cb83-10" tabindex="-1"></a><span class="at">    </span><span class="fu">code_font</span><span class="kw">:</span></span>
<span id="cb83-11"><a href="html.html#cb83-11" tabindex="-1"></a><span class="at">      </span><span class="fu">google</span><span class="kw">:</span><span class="at"> </span></span>
<span id="cb83-12"><a href="html.html#cb83-12" tabindex="-1"></a><span class="co">        # arguments to sass::font_google() </span></span>
<span id="cb83-13"><a href="html.html#cb83-13" tabindex="-1"></a><span class="at">        </span><span class="fu">family</span><span class="kw">:</span><span class="at"> DM Mono</span></span>
<span id="cb83-14"><a href="html.html#cb83-14" tabindex="-1"></a><span class="at">        </span><span class="fu">local</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>
<p>默认情况下，<code>google:</code> 会将字体文件与你的书籍捆绑在一起，所以它会在本地下载、缓存并提供相关的字体文件。这意味着当你与其他人分享书籍时，即使没有互联网连接，字体也能保证呈现出来（<code>local: false</code> 通过 URL 导入文件，而不在本地提供）。</p>
<p>你也可以使用非谷歌字体，使用 <a href="https://rstudio.github.io/sass/reference/font_face.html#serving-non-google-fonts-locally"><code>sass::font_face()</code></a> 在本地提供。</p>
</div>
<div id="标注区块" class="section level4 hasAnchor" number="3.1.2.3">
<h4><span class="header-section-number">3.1.2.3</span> 标注区块<a href="html.html#标注区块" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>标注区块可以用来使某些部分的内容从你叙述的其他部分中突出出来。<code>bs4_book</code> 样式包括特殊的标注区块，它具有预定义的风格，可以在标注的文本和/或代码周围添加一个彩色的边框。使用下面的语法来创建一个标注区块。</p>
<div class="sourceCode" id="cb84"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb84-1"><a href="html.html#cb84-1" tabindex="-1"></a>::: {.rmdnote}</span>
<span id="cb84-2"><a href="html.html#cb84-2" tabindex="-1"></a><span class="in">`bs4_book`</span> 样式也包含一个像这样的 <span class="in">`.rmdnote`</span> </span>
<span id="cb84-3"><a href="html.html#cb84-3" tabindex="-1"></a>标注区块。</span>
<span id="cb84-4"><a href="html.html#cb84-4" tabindex="-1"></a></span>
<span id="cb84-5"><a href="html.html#cb84-5" tabindex="-1"></a>``<span class="in">`{r collapse=TRUE}`</span></span>
<span id="cb84-6"><a href="html.html#cb84-6" tabindex="-1"></a>head(beaver1, n = 5)</span>
<span id="cb84-7"><a href="html.html#cb84-7" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb84-8"><a href="html.html#cb84-8" tabindex="-1"></a><span class="in">:::</span></span></code></pre></div>
<p>你可以在区块内使用 Markdown 语法和行内代码。生成书籍时，输出内容看起来和图 <a href="html.html#fig:bs4-note">3.4</a> 类似。</p>
<div class="figure" style="text-align: center"><span style="display:block;" id="fig:bs4-note"></span>
<img src="images/rmd-note.png" alt="A special callout block."  />
<p class="caption">
图 3.4: A special callout block.
</p>
</div>
<p>可用的区块有 <code>.rmdnote</code>、<code>.rmdcaution</code>、<code>.rmdimportant</code>、<code>.rmdtip</code> 和 <code>.rmdwarning</code>。使用的颜色将基于 Bootstrap 提供的默认颜色，但也可以在你的 <code>_output.yml</code> 文件中自定义。</p>
<div class="sourceCode" id="cb85"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb85-1"><a href="html.html#cb85-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb85-2"><a href="html.html#cb85-2" tabindex="-1"></a><span class="at">  </span><span class="fu">theme</span><span class="kw">:</span></span>
<span id="cb85-3"><a href="html.html#cb85-3" tabindex="-1"></a><span class="at">    </span><span class="fu">primary</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;#0d6efd&quot;</span><span class="co">   # default .rmdnote = blue</span></span>
<span id="cb85-4"><a href="html.html#cb85-4" tabindex="-1"></a><span class="at">    </span><span class="fu">danger</span><span class="kw">:</span><span class="at">  </span><span class="st">&quot;#dc3545&quot;</span><span class="co">   # default .rmdcaution = red</span></span>
<span id="cb85-5"><a href="html.html#cb85-5" tabindex="-1"></a><span class="at">    </span><span class="fu">success</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;#198754&quot;</span><span class="co">   # default .rmdimportant = green</span></span>
<span id="cb85-6"><a href="html.html#cb85-6" tabindex="-1"></a><span class="at">    </span><span class="fu">info</span><span class="kw">:</span><span class="at">    </span><span class="st">&quot;#0dcaf0&quot;</span><span class="co">   # default .rmdtip = cyan</span></span>
<span id="cb85-7"><a href="html.html#cb85-7" tabindex="-1"></a><span class="at">    </span><span class="fu">warning</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;#ffc107&quot;</span><span class="co">   # default .rmdwarning = yellow</span></span></code></pre></div>
<p>对于LaTeX输出，只有这些区块的内容会被显示出来，没有像 HTML 那样的彩色轮廓。用户可以使用自定义环境来定义在 LaTeX 输出时这些区块的外观。参见 <a href="https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html"><em>R Markdown Cookbook</em></a>以了解如何操作。</p>
</div>
<div id="html-元数据" class="section level4 hasAnchor" number="3.1.2.4">
<h4><span class="header-section-number">3.1.2.4</span> HTML 元数据<a href="html.html#html-元数据" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>Bookdown 将根据 Pandoc 在 <code>index.Rmd</code> 中设置的变量生成 HTML <code>&lt;meta&gt;</code> 标签，该部分内容在第 <a href="html-发布功能.html#metadata-for-sharing">6.4.2</a> 节中进行了描述。此外，<code>bs4_book()</code> 将创建独特的章节描述，这些描述是由章节的内容自动生成的。你可以查阅 <a href="https://github.com/rstudio/bookdown/blob/main/inst/templates/bs4_book.html"><code>bs4_book</code> 的 HTML
模板</a>来了解这些变量的使用细节。</p>
</div>
<div id="bs4-book-footnotes" class="section level4 hasAnchor" number="3.1.2.5">
<h4><span class="header-section-number">3.1.2.5</span> 行内脚注<a href="html.html#bs4-book-footnotes" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p><code>bs4_book</code> 使任何脚注显示为在悬停状态下的行内显示，而不是在页面底部的链接项。您可以设置 <code>footnotes_inline = FALSE</code> 来选择取消这种行为，并将脚注放在底部。</p>
<div class="sourceCode" id="cb86"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb86-1"><a href="html.html#cb86-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb86-2"><a href="html.html#cb86-2" tabindex="-1"></a><span class="at">  </span><span class="fu">footnotes_inline</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>
</div>
<div id="参考文献书目" class="section level4 hasAnchor" number="3.1.2.6">
<h4><span class="header-section-number">3.1.2.6</span> 参考文献/书目<a href="html.html#参考文献书目" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>将你的引用文献制作为 <em>脚注</em>，可以让读者在引用它们的文本附近阅读脚注内容，因为 <code>bs4_book</code> 默认使脚注在点击时出现在行内。要做到这一点，请下载一个脚注样式的 CSL 文件；我们推荐 <a href="https://www.zotero.org/styles/" class="uri">https://www.zotero.org/styles/</a>。例如，你可以从 <a href="https://www.zotero.org/styles/?q=id%3Achicago-fullnote-bibliography">Zotero</a> 下载 <code>chicago-fullnote-bibliography.csl</code>，然后添加到你的 <code>index.Rmd</code> 中。</p>
<div class="sourceCode" id="cb87"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb87-1"><a href="html.html#cb87-1" tabindex="-1"></a><span class="fu">bibliography</span><span class="kw">:</span><span class="at"> refs.bib</span></span>
<span id="cb87-2"><a href="html.html#cb87-2" tabindex="-1"></a><span class="fu">csl</span><span class="kw">:</span><span class="at"> chicago-fullnote-bibliography.csl</span></span></code></pre></div>
<p>如果你不想在书籍的最后有一个参考文献章节，可以选择在你的 <code>index.Rmd</code> 中添加这一行：</p>
<div class="sourceCode" id="cb88"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb88-1"><a href="html.html#cb88-1" tabindex="-1"></a><span class="fu">suppress-bibliography</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code></pre></div>
<p>如果你想使用不支持脚注的引用文献样式，参考文献将不会在行内弹出窗口中显示。在这种情况下，你可能希望在你的 <code>_output.yml</code> 中添加 <code>split_bib</code> 配置项。</p>
<div class="sourceCode" id="cb89"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb89-1"><a href="html.html#cb89-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb89-2"><a href="html.html#cb89-2" tabindex="-1"></a><span class="at">  </span><span class="fu">split_bib</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code></pre></div>
<p>这样，你的参考书目将被拆分，相关的引用文献项目将被放在每一章的底部，这样读者就不必跳转到不同的参考书目页来查看引用文献的细节。</p>
</div>
<div id="指定储存库" class="section level4 hasAnchor" number="3.1.2.7">
<h4><span class="header-section-number">3.1.2.7</span> 指定储存库<a href="html.html#指定储存库" class="anchor-section" aria-label="Anchor link to header"></a></h4>
<p>为你的书籍指定一个源码储存库，让你的读者可以轻松查看每一章的源文件或提出编辑建议。</p>
<p>如果你的书籍有一个名为 <code>main</code> 的默认分支，可以使用。</p>
<div class="sourceCode" id="cb90"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb90-1"><a href="html.html#cb90-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb90-2"><a href="html.html#cb90-2" tabindex="-1"></a><span class="at">  </span><span class="fu">repo</span><span class="kw">:</span></span>
<span id="cb90-3"><a href="html.html#cb90-3" tabindex="-1"></a><span class="at">    </span><span class="fu">base</span><span class="kw">:</span><span class="at"> https://github.com/hadley/ggplot2-book</span></span>
<span id="cb90-4"><a href="html.html#cb90-4" tabindex="-1"></a><span class="at">    </span><span class="fu">branch</span><span class="kw">:</span><span class="at"> main</span></span></code></pre></div>
<p>进一步，如果你的书籍位于一个名为 “book” 的子目录中，你可以使用：</p>
<div class="sourceCode" id="cb91"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb91-1"><a href="html.html#cb91-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb91-2"><a href="html.html#cb91-2" tabindex="-1"></a><span class="at">  </span><span class="fu">repo</span><span class="kw">:</span></span>
<span id="cb91-3"><a href="html.html#cb91-3" tabindex="-1"></a><span class="at">    </span><span class="fu">base</span><span class="kw">:</span><span class="at"> https://github.com/hadley/ggplot2-book</span></span>
<span id="cb91-4"><a href="html.html#cb91-4" tabindex="-1"></a><span class="at">    </span><span class="fu">branch</span><span class="kw">:</span><span class="at"> main</span></span>
<span id="cb91-5"><a href="html.html#cb91-5" tabindex="-1"></a><span class="at">    </span><span class="fu">subdir</span><span class="kw">:</span><span class="at"> book</span></span></code></pre></div>
<p>默认情况下，如果储存库的 URL 包含 “github”，它将获得一个 GitHub <a href="https://fontawesome.com">Font Awesome</a> 图标，否则它将获得一个 GitLab 图标。要使用其他图标，请用正确的前缀来指定，如 <code>fas</code>、<code>fab</code> 等等 (<a href="https://fontawesome.com/v5.0/how-to-use/on-the-web/referencing-icons/basic-use">Font Awesome 5</a>)。</p>
<div class="sourceCode" id="cb92"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb92-1"><a href="html.html#cb92-1" tabindex="-1"></a><span class="at">bookdown:</span><span class="fu">:bs4_book</span><span class="kw">:</span></span>
<span id="cb92-2"><a href="html.html#cb92-2" tabindex="-1"></a><span class="at">  </span><span class="fu">repo</span><span class="kw">:</span></span>
<span id="cb92-3"><a href="html.html#cb92-3" tabindex="-1"></a><span class="at">    </span><span class="fu">base</span><span class="kw">:</span><span class="at"> https://github.com/hadley/ggplot2-book</span></span>
<span id="cb92-4"><a href="html.html#cb92-4" tabindex="-1"></a><span class="at">    </span><span class="fu">branch</span><span class="kw">:</span><span class="at"> main</span></span>
<span id="cb92-5"><a href="html.html#cb92-5" tabindex="-1"></a><span class="at">    </span><span class="fu">subdir</span><span class="kw">:</span><span class="at"> book</span></span>
<span id="cb92-6"><a href="html.html#cb92-6" tabindex="-1"></a><span class="at">    </span><span class="fu">icon</span><span class="kw">:</span><span class="at"> </span><span class="st">&quot;fas fa-air-freshener&quot;</span></span></code></pre></div>
</div>
</div>
<div id="bootstrap-style" class="section level3 hasAnchor" number="3.1.3">
<h3><span class="header-section-number">3.1.3</span> 默认的 Bootstrap 样式<a href="html.html#bootstrap-style" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>如果你之前使用过 R Markdown，你应该熟悉 Bootstrap 样式 (<a href="https://getbootstrap.com" class="uri">https://getbootstrap.com</a>)，它是 R Markdown 的 HTML 输出格式的默认样式。<strong>rmarkdown</strong> 中的输出格式函数是 <code>html_document()</code>，并且我们在 <strong>bookdown</strong> 中也有一个相应的格式 <code>html_book()</code>，它使用 <code>html_document()</code> 作为基础格式。你可以在这里阅读 <code>html_book()</code> 的样例：<a href="https://bookdown.org/yihui/bookdown-demo2" class="uri">https://bookdown.org/yihui/bookdown-demo2</a>。</p>
<p>事实上，<strong>bookdown</strong> 中有一个更加通用的格式 <code>html_chapters()</code>，<code>html_book()</code> 只是它的特例：</p>
<div class="sourceCode" id="cb93"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb93-1"><a href="html.html#cb93-1" tabindex="-1"></a><span class="fu">html_chapters</span>(<span class="at">toc =</span> <span class="cn">TRUE</span>, <span class="at">number_sections =</span> <span class="cn">TRUE</span>,</span>
<span id="cb93-2"><a href="html.html#cb93-2" tabindex="-1"></a>  <span class="at">fig_caption =</span> <span class="cn">TRUE</span>, <span class="at">lib_dir =</span> <span class="st">&quot;libs&quot;</span>,</span>
<span id="cb93-3"><a href="html.html#cb93-3" tabindex="-1"></a>  <span class="at">template =</span> <span class="fu">bookdown_file</span>(<span class="st">&quot;templates/default.html&quot;</span>),</span>
<span id="cb93-4"><a href="html.html#cb93-4" tabindex="-1"></a>  <span class="at">global_numbering =</span> <span class="sc">!</span>number_sections,</span>
<span id="cb93-5"><a href="html.html#cb93-5" tabindex="-1"></a>  <span class="at">pandoc_args =</span> <span class="cn">NULL</span>, ...,</span>
<span id="cb93-6"><a href="html.html#cb93-6" tabindex="-1"></a>  <span class="at">base_format =</span> rmarkdown<span class="sc">::</span>html_document,</span>
<span id="cb93-7"><a href="html.html#cb93-7" tabindex="-1"></a>  <span class="at">split_bib =</span> <span class="cn">TRUE</span>, <span class="at">page_builder =</span> build_chapter,</span>
<span id="cb93-8"><a href="html.html#cb93-8" tabindex="-1"></a>  <span class="at">split_by =</span> <span class="fu">c</span>(<span class="st">&quot;section+number&quot;</span>, <span class="st">&quot;section&quot;</span>, <span class="st">&quot;chapter+number&quot;</span>, <span class="st">&quot;chapter&quot;</span>, <span class="st">&quot;rmd&quot;</span>, <span class="st">&quot;none&quot;</span>))</span></code></pre></div>
<p>请注意它有一个 <code>base_format</code> 参数，接受一个基础输出格式函数，并且 <code>html_book()</code> 基本上就是 <code>html_chapters(base_format = rmarkdown::html_document)</code>。<code>html_book()</code> 的所有参数都传递给 <code>html_chapters()</code>:</p>
<div class="sourceCode" id="cb94"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb94-1"><a href="html.html#cb94-1" tabindex="-1"></a><span class="fu">html_book</span>(...)</span></code></pre></div>
<p>这意味着你可以使用 <code>rmarkdown::html_document</code> 的大多数参数，例如 <code>toc</code> （是否展示目录）， <code>number_sections</code>（是否为章节标题标号）等等。类似地，关于可用配置项的完整列表，请查阅 <code>rmarkdown::html_document</code> 的帮助页面。注意 <code>self_contained</code> 参数在内部硬编码为 <code>FALSE</code>，因此你不能更改这个参数的值。关于 <code>split_by</code> 参数，我们在之前的章节中已经解释过了。</p>
<p>参数 <code>template</code> 和 <code>page_builder</code> 是为高级用户准备的，除非你有强烈的定制 HTML 输出的需求，并且 <code>rmarkdown::html_document()</code> 提供的众多选项仍然无法为你提供想要的效果，否则你不需要理解它们。</p>
<p>如果你想将不同的 HTML 模板传递给 <code>template</code> 参数，则模板必须包括三对 HTML 注释，每条注释必须位于单独的行中：</p>
<ul>
<li><code>&lt;!--bookdown:title:start--&gt;</code> 和 <code>&lt;!--bookdown:title:end--&gt;</code> 标记书籍的标题部分。这部分仅放在编译好的书籍的第一页；</li>
<li><code>&lt;!--bookdown:toc:start--&gt;</code> 和 <code>&lt;!--bookdown:toc:end--&gt;</code> 标记目录部分，这部分将会被放在所有 HTML 页面上；</li>
<li><code>&lt;!--bookdown:body:start--&gt;</code> 和 <code>&lt;!--bookdown:body:end--&gt;</code> 标记书籍的 HTML 主体，HTML 主体内容将会被划分为多个单独的页面。回想一下，我们合并了所有 R Markdown 或 Markdown 文件，然后将其编译为单个 HTML 文件，并将其拆分；</li>
</ul>
<p>你可以打开默认的 HTML 模板，查看这些注释的插入位置：</p>
<div class="sourceCode" id="cb95"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb95-1"><a href="html.html#cb95-1" tabindex="-1"></a>bookdown<span class="sc">:::</span><span class="fu">bookdown_file</span>(<span class="st">&#39;templates/default.html&#39;</span>)</span>
<span id="cb95-2"><a href="html.html#cb95-2" tabindex="-1"></a><span class="co"># you may use file.edit() to open this file</span></span></code></pre></div>
<p>一旦你知道 <strong>bookdown</strong> 在内部如何生成多页 HTML 输出，将更容易理解 <code>page_builder</code> 参数。它是一个函数，能够使用从上述注释标志中提取的 HTML 片段来合成每个单独的 HTML 页面。<code>page_builder</code> 的默认值是 <strong>bookdown</strong> 中的 <code>build_chapter</code> 函数，其源代码相对简单（忽略 <code>button_link()</code> 等内部函数）：</p>
<div class="sourceCode" id="cb96"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb96-1"><a href="html.html#cb96-1" tabindex="-1"></a>build_chapter <span class="ot">=</span> <span class="cf">function</span>(</span>
<span id="cb96-2"><a href="html.html#cb96-2" tabindex="-1"></a>  head, toc, chapter, link_prev, link_next, rmd_cur, html_cur, foot</span>
<span id="cb96-3"><a href="html.html#cb96-3" tabindex="-1"></a>) {</span>
<span id="cb96-4"><a href="html.html#cb96-4" tabindex="-1"></a>  toc <span class="ot">=</span> <span class="fu">add_toc_class</span>(toc)</span>
<span id="cb96-5"><a href="html.html#cb96-5" tabindex="-1"></a>  <span class="fu">paste</span>(<span class="fu">c</span>(</span>
<span id="cb96-6"><a href="html.html#cb96-6" tabindex="-1"></a>    head,</span>
<span id="cb96-7"><a href="html.html#cb96-7" tabindex="-1"></a>    <span class="st">&#39;&lt;div class=&quot;row&quot;&gt;&#39;</span>,</span>
<span id="cb96-8"><a href="html.html#cb96-8" tabindex="-1"></a>    <span class="st">&#39;&lt;div class=&quot;col-sm-12&quot;&gt;&#39;</span>,</span>
<span id="cb96-9"><a href="html.html#cb96-9" tabindex="-1"></a>    toc,</span>
<span id="cb96-10"><a href="html.html#cb96-10" tabindex="-1"></a>    <span class="st">&#39;&lt;/div&gt;&#39;</span>,</span>
<span id="cb96-11"><a href="html.html#cb96-11" tabindex="-1"></a>    <span class="st">&#39;&lt;/div&gt;&#39;</span>,</span>
<span id="cb96-12"><a href="html.html#cb96-12" tabindex="-1"></a>    <span class="st">&#39;&lt;div class=&quot;row&quot;&gt;&#39;</span>,</span>
<span id="cb96-13"><a href="html.html#cb96-13" tabindex="-1"></a>    <span class="st">&#39;&lt;div class=&quot;col-sm-12&quot;&gt;&#39;</span>,</span>
<span id="cb96-14"><a href="html.html#cb96-14" tabindex="-1"></a>    chapter,</span>
<span id="cb96-15"><a href="html.html#cb96-15" tabindex="-1"></a>    <span class="st">&#39;&lt;p style=&quot;text-align: center;&quot;&gt;&#39;</span>,</span>
<span id="cb96-16"><a href="html.html#cb96-16" tabindex="-1"></a>    <span class="fu">button_link</span>(link_prev, <span class="st">&#39;Previous&#39;</span>),</span>
<span id="cb96-17"><a href="html.html#cb96-17" tabindex="-1"></a>    <span class="fu">source_link</span>(rmd_cur, <span class="at">type =</span> <span class="st">&#39;edit&#39;</span>),</span>
<span id="cb96-18"><a href="html.html#cb96-18" tabindex="-1"></a>    <span class="fu">source_link</span>(rmd_cur, <span class="at">type =</span> <span class="st">&#39;history&#39;</span>),</span>
<span id="cb96-19"><a href="html.html#cb96-19" tabindex="-1"></a>    <span class="fu">source_link</span>(rmd_cur, <span class="at">type =</span> <span class="st">&#39;view&#39;</span>),</span>
<span id="cb96-20"><a href="html.html#cb96-20" tabindex="-1"></a>    <span class="fu">button_link</span>(link_next, <span class="st">&#39;Next&#39;</span>),</span>
<span id="cb96-21"><a href="html.html#cb96-21" tabindex="-1"></a>    <span class="st">&#39;&lt;/p&gt;&#39;</span>,</span>
<span id="cb96-22"><a href="html.html#cb96-22" tabindex="-1"></a>    <span class="st">&#39;&lt;/div&gt;&#39;</span>,</span>
<span id="cb96-23"><a href="html.html#cb96-23" tabindex="-1"></a>    <span class="st">&#39;&lt;/div&gt;&#39;</span>,</span>
<span id="cb96-24"><a href="html.html#cb96-24" tabindex="-1"></a>    foot</span>
<span id="cb96-25"><a href="html.html#cb96-25" tabindex="-1"></a>  ), <span class="at">collapse =</span> <span class="st">&#39;</span><span class="sc">\n</span><span class="st">&#39;</span>)</span>
<span id="cb96-26"><a href="html.html#cb96-26" tabindex="-1"></a>}</span></code></pre></div>
<p>基本上，这个函数使用许多组件，如 HTML 头部、目录、章节正文等，它将返回一个字符串，该字符串是完整 HTML 页面的 HTML 源代码。你可以使用诸如 <code>gsub()</code> 和 <code>paste()</code> 之类的文本处理函数来操作此函数中的所有组件。</p>
<p>默认的页面生成器所做的是将目录放在第一行，正文放在第二行，导航按钮放在正文底部，并将它们与 HTML 头部和底部连接起来。下面是 HTML 源代码的一个简要示例，可以帮助你理解 <code>build_chapter()</code> 的输出：</p>
<div class="sourceCode" id="cb97"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb97-1"><a href="html.html#cb97-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
<span id="cb97-2"><a href="html.html#cb97-2" tabindex="-1"></a>  <span class="dt">&lt;</span><span class="kw">head</span><span class="dt">&gt;</span></span>
<span id="cb97-3"><a href="html.html#cb97-3" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">title</span><span class="dt">&gt;</span>一本好书<span class="dt">&lt;/</span><span class="kw">title</span><span class="dt">&gt;</span></span>
<span id="cb97-4"><a href="html.html#cb97-4" tabindex="-1"></a>  <span class="dt">&lt;/</span><span class="kw">head</span><span class="dt">&gt;</span></span>
<span id="cb97-5"><a href="html.html#cb97-5" tabindex="-1"></a>  <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
<span id="cb97-6"><a href="html.html#cb97-6" tabindex="-1"></a>  </span>
<span id="cb97-7"><a href="html.html#cb97-7" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">div</span><span class="ot"> class</span><span class="op">=</span><span class="st">&quot;row&quot;</span><span class="dt">&gt;</span>目录<span class="dt">&lt;/</span><span class="kw">div</span><span class="dt">&gt;</span></span>
<span id="cb97-8"><a href="html.html#cb97-8" tabindex="-1"></a>    </span>
<span id="cb97-9"><a href="html.html#cb97-9" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">div</span><span class="ot"> class</span><span class="op">=</span><span class="st">&quot;row&quot;</span><span class="dt">&gt;</span></span>
<span id="cb97-10"><a href="html.html#cb97-10" tabindex="-1"></a>      章节主体</span>
<span id="cb97-11"><a href="html.html#cb97-11" tabindex="-1"></a>      <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span></span>
<span id="cb97-12"><a href="html.html#cb97-12" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">button</span><span class="dt">&gt;</span>上一章<span class="dt">&lt;/</span><span class="kw">button</span><span class="dt">&gt;</span></span>
<span id="cb97-13"><a href="html.html#cb97-13" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">button</span><span class="dt">&gt;</span>下一章<span class="dt">&lt;/</span><span class="kw">button</span><span class="dt">&gt;</span></span>
<span id="cb97-14"><a href="html.html#cb97-14" tabindex="-1"></a>      <span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
<span id="cb97-15"><a href="html.html#cb97-15" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">div</span><span class="dt">&gt;</span></span>
<span id="cb97-16"><a href="html.html#cb97-16" tabindex="-1"></a>  </span>
<span id="cb97-17"><a href="html.html#cb97-17" tabindex="-1"></a>  <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
<span id="cb97-18"><a href="html.html#cb97-18" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
<p>对于所有 HTML 页面，主要的区别在于章节主体，其它大部分元素是相同的。<code>html_book()</code> 的默认输出将在 <code>&lt;head&gt;</code> 标签中包括 Bootstrap CSS 和 JavaScript 文件。</p>
<p>目录常用于导航。在 GitBook 样式中，目录显示在侧边栏中。对于 Bootstrap 样式，我们没有对它应用特殊样式，因此它显示为普通的无序列表（在 HTML 标签 <code>&lt;ul&gt;</code> 中）。使用某些 CSS 技术可以轻松地将此列表转为导航栏。在这个软件包中我们已经提供了一个 CSS 文件 <code>toc.css</code>，你可以在这里找到它：<a href="https://github.com/rstudio/bookdown/blob/master/inst/examples/css/toc.css" class="uri">https://github.com/rstudio/bookdown/blob/master/inst/examples/css/toc.css</a></p>
<p>你可以复制这个文件导你的书籍的根目录，然后通过 <code>css</code> 配置项应用到 HTML 输出，例如：</p>
<div class="sourceCode" id="cb98"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb98-1"><a href="html.html#cb98-1" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb98-2"><a href="html.html#cb98-2" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>
<span id="cb98-3"><a href="html.html#cb98-3" tabindex="-1"></a><span class="at">  bookdown:</span><span class="fu">:html_book</span><span class="kw">:</span></span>
<span id="cb98-4"><a href="html.html#cb98-4" tabindex="-1"></a><span class="at">    </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb98-5"><a href="html.html#cb98-5" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> toc.css</span></span>
<span id="cb98-6"><a href="html.html#cb98-6" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
<p>如果你在网上稍微搜索一下，就能找到许多可能的方法将 <code>&lt;ul&gt;</code> 列表变成导航菜单，你可以选择你喜欢的菜单样式。我们刚才提到的 <code>toc.css</code> 是一种在黑色背景上有白色菜单文本的样式，并且支持子菜单（例如，节标题显示为章标题下的下拉菜单）。</p>
<p>事实上，如果你把 <code>theme</code> 选项设置为 <code>null</code>，就可以在 <code>html_document()</code> 中摆脱 Bootstrap 样式，你可以自由地使用 <code>css</code> 选项在 HTML 输出中应用任意的样式（如果你想在 HTML 头部/底部中包含任意的内容，还可以使用 <code>includes</code> 选项）。</p>
</div>
<div id="tufte-style" class="section level3 hasAnchor" number="3.1.4">
<h3><span class="header-section-number">3.1.4</span> Tufte 样式<a href="html.html#tufte-style" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<p>和 Bootstrap 样式一样，Tufte 样式由输出格式 <code>tufte_html_book()</code> 提供，这也是 <code>html_chapters()</code> 的一个特例，使用 <code>tufte::tufte_html()</code> 作为基础格式。如果你不熟悉 Tufte 样式，请查阅 <strong>tufte</strong> 软件包<span class="citation">(<a href="#ref-R-tufte">Xie and Allaire 2023</a>)</span>。你可以在这里阅读一个 <code>tufte_html_book()</code> 的例子：<a href="https://bookdown.org/yihui/bookdown-demo3/" class="uri">https://bookdown.org/yihui/bookdown-demo3/</a>。</p>
<p>基本上，它是一个左边是主栏，右边是边栏的布局。内容主体在主栏中，边栏用来放置脚注 (footnotes)、边注 (margin notes)、参考文献 (references) 和边栏图片 (margin figures) 等。</p>
<p><code>tufte_html_book()</code> 的所有参数的含义与 <code>html_book()</code> 完全相同，例如，你同样也可以通过 <code>css</code> 配置项定制 CSS。然而，有一些元素是 Tufte 风格所特有的，如边注 (margin notes)、边栏图片 (margin figures) 和全宽图片 (full-width figures)。这些元素需要特殊的语法来生成；请查阅 <strong>tufte</strong> 软件包的文档。请注意，你不需要对脚注和参考文献做任何特殊处理（只需使用正常的 Markdown 语法 <code>^[footnote]</code> 和 <code>[@citation]</code>），因为它们会被自动放到页边。一个关于 <code>tufte_html_book</code> 格式的简短 YAML 示例如下：</p>
<div class="sourceCode" id="cb99"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb99-1"><a href="html.html#cb99-1" tabindex="-1"></a><span class="pp">---</span></span>
<span id="cb99-2"><a href="html.html#cb99-2" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>
<span id="cb99-3"><a href="html.html#cb99-3" tabindex="-1"></a><span class="at">  bookdown:</span><span class="fu">:tufte_html_book</span><span class="kw">:</span></span>
<span id="cb99-4"><a href="html.html#cb99-4" tabindex="-1"></a><span class="at">    </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb99-5"><a href="html.html#cb99-5" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> toc.css</span></span>
<span id="cb99-6"><a href="html.html#cb99-6" tabindex="-1"></a><span class="pp">---</span></span></code></pre></div>
</div>
</div>
<h3>参考文献<a href="参考文献.html#参考文献" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<div id="refs" class="references csl-bib-body hanging-indent" entry-spacing="0">
<div id="ref-R-tufte" class="csl-entry">
Xie, Yihui, and JJ Allaire. 2023. <em>Tufte: Tufte’s Styles for r Markdown Documents</em>. <a href="https://github.com/rstudio/tufte">https://github.com/rstudio/tufte</a>.
</div>
</div>
<div class="footnotes">
<hr />
<ol start="9">
<li id="fn9"><p>要查看有关如何自动生成标识符的更多详细内容，请参阅 Pandoc 文档中 <code>auto_identifiers</code> 扩展相关内容 <a href="http://pandoc.org/MANUAL.html#header-identifiers" class="uri">http://pandoc.org/MANUAL.html#header-identifiers</a><a href="html.html#fnref9" class="footnote-back">↩︎</a></p></li>
<li id="fn10"><p>在 <code>:</code> 之前插入的反斜杠是因为一个技术问题：我们要防止 Pandoc 将链接翻译为 HTML 代码 <code>&lt;a href="..."&gt;&lt;/a&gt;</code>。在 <a href="https://github.com/jgm/pandoc/issues/2139" class="uri">https://github.com/jgm/pandoc/issues/2139</a> 上你能够看到更多细节<a href="html.html#fnref10" class="footnote-back">↩︎</a></p></li>
</ol>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="output-formats.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="latexpdf.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"whatsapp": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/YuanchenZhu2020/bookdown-book-zhCN/edit/main/03-formats.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["bookdown-book-zhCN.pdf", "bookdown-book-zhCN.epub", "bookdown-book-zhCN.mobi"],
"search": {
"engine": "fuse",
"options": null
},
"toc": {
"collapse": "none"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
